The crop box overflows container? I cannot reappear it, or may be I don't understand what you are meaning.

The crop box outline overflows container in vision is right and it is designed as this.

Yes. In view mode 1 and 2, if the canvas is moved/positioned beyond the container boundaries, the crop box can overflow the container and also the canvas (depending on which side out of the container the canvas was moved).

I can reproduce it on the Cropper.js demo page by following the steps in the PR description. Have you tried these?

I've tried to describe the issue as clear as possible in the description and in the code (tests), but I can also post a screenshot of the bug after the next week. (I'm on vacation right now with no access to a desktop computer.)

If I understood your quote correctly: It has nothing to do with the outline of the crop box. I know this is designed to be visually over the container borders and makes perfect sense.

Edit – More from code perspective: The maximum crop box size was set to be the canvas size (in limited mode). If part of the canvas is moved beyond the container boundaries, the offset was not deducted when calculating crop box max height/width.

Got it! Thanks!

@fengyuanchen Thanks for merging.

But I realized that with the commit after the merge (086a568), half of the fix was reverted. That is, in the case when the canvas is dragged/moved beyond the container boundaries on the bottom and/or right sides, the crop box can overflow the canvas in limited view mode (1 and 2). See also steps to reproduce from the PR description.

I wrote a test for this case, but that was removed with e1b015b, unfortunately.

Although I wished it would be simpler, using the code in "render.js" from this PR will fix this case. You're right that it could be two Math.min less, though – so:

let maxCropBoxWidth = containerData.width;
let maxCropBoxHeight = containerData.height;

if (limited) {
  const canvasRight = containerData.width - canvasData.left - canvasData.width;
  const canvasBottom = containerData.height - canvasData.top - canvasData.height;

  maxCropBoxWidth = Math.min(
    containerData.width,
    canvasData.width,
    canvasData.width + (canvasRight < 0 ? canvasRight : canvasData.left),
  );
  maxCropBoxHeight = Math.min(
    containerData.height,
    canvasData.height,
    canvasData.height + (canvasBottom < 0 ? canvasBottom : canvasData.top),
  );
}

I can post a screenshot of the issue after the next week. Thanks!

You are right, I will revert it soon.

👍 Your calculation for this case is much simpler.